<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" deferredSyntaxAllowedAsLiteral="true"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <title>User List</title>
</head>
<body>
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">用户名：</label>
        <div class="layui-input-inline">
            <input type="text" id="name" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon layui-icon-search"></i>
                查询
            </button>
            <button id="btn_add" type="button" class="layui-btn" lay-event="add">新增</button>
        </div>
    </div>
</div>

<div class="container mt-5">
    <table class="layui-hide" id="tbl_user"lay-filter="test"></table>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/layui/layui.js"></script>
<script>
    let table, $, layer;
    let row;

    layui.use(['table','jquery','layer'], function(){
        table = layui.table
            ,layer=layui.layer
            ,$=layui.jquery;
        //1.初始化列表
        initTable();
        //为查询按钮设置点击事件
        $("#btn_search").click(function(){
            query();
        })
        //为新增按钮设置点击事件
        $("#btn_add").click(function(){
            row=null;
            add('新增');
        })
    });
    //查询的点击事件
    function query(){
        let param = {
            'username': $("#name").val(),
        }
        //表格的重载
        table.reload('tbl_user', {
            url: '../user/select', // 修改为后端处理查询的接口地址
            where: {
                username:param.username,
            },
            page: {
                curr: 1 // 重新加载第一页
            },
        });
    }
    //新增/修改的点击事件
    function add(title){
        layer.open({
            type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            title: title,
            area: ['660px', '460px'],   //宽高
            skin: 'layui-layer-rim',    //样式类名
            content:  '../login/registerInit', //书本编辑页面
            btn:['保存','关闭'],
            yes: function(index, layero){
                //调用子页面中提供的getData方法，快速获取子页面的form表单数据
                let data= $(layero).find("iframe")[0].contentWindow.getData();
                console.log(data);
                $.post('../login/registerInit',
                    data,function(rs){
                        if(rs.code==="0"){
                            //关闭对话框
                            layer.closeAll();
                            //调用查询方法刷新数据
                            query();
                        }else{
                            layer.msg("保存失败！");
                        }
                    },'json');
            },
            btn2: function(index, layero){
                layer.closeAll();
            }
        });
    }
    function initTable(){
        table.render({
            elem: '#tbl_user'
            ,url:'../user'
            ,method: 'get'
            //,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,request: {
                pageName: 'page', // 页码的参数名称，默认：page
                limitName: 'size', // 每页数据条数的参数名，默认：limit
                sort: 'sort'
            }
            ,title: '用户数据表'
            ,cols: [[
                {type: 'numbers', title:'序号', fixed: 'left', sort: true}
                ,{field:'username', title:'用户名'}
                ,{field:'account', title:'账号'}
                ,{field:'role', title:'身份', templet: function(res){
                        if(res.role === "0")
                            return '管理员';
                        else if(res.role === "1")
                            return '观众';
                        else
                            return '评委';
                    }}
                ,{field:'phone', title:'联系方式'}
                ,{field: 'registertime', title: '注册时间', templet: function(d){
                        var date = new Date(d.registertime);
                        var formattedTime = layui.util.toDateString(date, 'yyyy-MM-dd HH:mm:ss');
                        return formattedTime;
                    }}
                ,{fixed: 'right', title:'操作', align:'center', toolbar: '#barDemo',
                    templet:function(){
                        var str = '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger ">删除</button>';
                        str += '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal ">修改</button>';
                        return str;
                    }
                }
            ]]
            ,page: true
        });

        table.on('tool(test)', function(obj){
            row = obj.data;
            console.log(obj);
            if(obj.event === 'del'){
                layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
                    $.ajax({
                        url: '../user/deleteInit/'+row.userid,
                        type: "post",
                        success: function() {
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                            console.log(index);
                            layer.msg("删除成功", {
                                icon: 1
                            });
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: "更新资料",
                    area: ['660px', '460px'],
                    skin: 'layui-layer-rim',
                    content: '../user/updateInit/' + row.userid,
                    success: function (index, layero) {
                        $.post('../user/updateInit/' + row.userid, function (rs) {
                            if (rs.code === "0") {
                                // 提示操作成功
                                layer.msg("操作成功", {
                                    icon: 1,
                                });
                                // 调用查询方法刷新数据
                                query();
                                layer.closeAll();
                            } else {
                                layer.msg("保存失败！");
                            }
                        }, 'json');
                    },
                });
            }
            else{
                add('新增');
            }
        });
    }
</script>
</body>
</html>
